<template>
    <div class='table'>
        <el-table
        border
        style="width: 100%"
        @row-click = "rowClick"
        :data="getTable_tableData"
        :header-row-style='{"color":"#5b5b5b"}'
        :header-cell-style="getRowClass"
        :cell-style='{"border-right":"1px solid #e7e7e7"}'>
        <el-table-column align="center" :prop='item.prop' :label="item.label"  v-for="(item,key,idex) in getTable_tableLable" :key='key'></el-table-column>
        <el-table-column align="center" label="操作"  fixed="right" v-if='getTable_show'>
          <template slot-scope="scope" >
            <slot name="buttons" >插槽自定义button</slot>
          </template>
        </el-table-column>
      </el-table> 
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
   export default {
    data() {
        return {
            
        }
    },
    computed: {
        ...mapState({
            getTable_tableData:state=>state.pubilcModule.table_tableData,
            getTable_tableLable:state=>state.pubilcModule.table_tableLable,
            getTable_show:state=>state.pubilcModule.table_show,
        })
    },
    methods: {
        ...mapMutations({
            setTable_row:'pubilcModule/setTable_row'
        }),
        rowClick(row){
            this.setTable_row(row)
        },
        /* 更改样式 */
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return "background:#c0bfd9;text-align:center;font-size:14px;font-weight:bold;border-right:1px solid #e7e7e7";
            } else {
                return "";
            }
        },
    },
   }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
